<template>
  <!-- 个人中心 -->
  <div class="personal">
    <!-- 头像手机背景 -->
    <div v-if="roleType == 'parent'" class="bg-green column-center">
      <van-icon name="user-circle-o" size="64" />
      <p style="color: rgba(255, 255, 255, 1);font-size: 14px;;">{{showPhone}}</p>
    </div>
    <div v-else class="bg-purple column-align-center">
      <p
        style="color: rgba(255, 255, 255, 1);font-size: 14px;text-align: left;width:100%;margin-left:14px;"
      >当前校区：{{campusID|campusFilter(campusList)}}</p>
      <van-icon name="user-circle-o" size="64" style="margin-top:20px;" />
      <p style="color: rgba(255, 255, 255, 1);font-size: 14px;">{{showPhone}}</p>
      <p style="color: rgba(255, 255, 255, 1);font-size: 18px;margin-top:0;">{{teacherName}}</p>
    </div>
    <!-- 我的订单 -->
    <div class="my-order" v-if="roleType == 'parent'">
      <van-cell
        style="border-radius: 8px 8px 0 0;"
        title="我的订单"
        is-link
        value="查看全部订单"
        title-style="color: rgba(16, 16, 16, 1);font-size: 13px;"
        value-class="me-cell-value"
        clickable
        @click="bindToOrder(0)"
      />
      <div class="row-space-around menu">
        <div class="column-center menu-icon" @click="bindToOrder(1)">
          <van-icon name="completed" size="23" />
          <p class="gird-p">已完成</p>
        </div>
        <div class="column-center menu-icon" @click="bindToOrder(2)">
          <van-icon name="paid" size="23" />
          <p class="gird-p">待付款</p>
        </div>
        <div class="column-center menu-icon" @click="bindToOrder(3)">
          <van-icon name="todo-list-o" size="23" />
          <p class="gird-p">已付款</p>
        </div>
        <div class="column-center menu-icon" @click="bindToOrder(4)">
          <van-icon name="cash-back-record" size="23" />
          <p class="gird-p">退款</p>
        </div>
      </div>
    </div>
    <!-- 学员信息 -->
    <div style="padding:0 6px;margin-top:11px;">
      <van-cell
        v-if="roleType == 'parent'"
        title="学员信息"
        is-link
        title-style="color: rgba(58, 58, 58, 1);font-size: 13px;"
        style="border-radius: 8px;"
        clickable
        to="/stuInfo"
      />
      <van-cell
        v-else
        title="切换校区"
        is-link
        title-style="color: rgba(58, 58, 58, 1);font-size: 13px;"
        style="border-radius: 8px;"
        clickable
        to="/firstLogin"
      />
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  methods: {
    // 跳转至订单信息
    bindToOrder(vals) {
      this.$router.push({ name: "Order", params: { active: vals } });
    }
  },
  computed: {
    ...mapGetters({
      phone: "getPhone",
      roleType: "getRoleType",
      campusList: "getCampusList",
      campusID: "getCampusID",
      teacherName: "getTeacherName"
    }),
    showPhone() {
      return this.phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
    }
  },
  filters: {
    campusFilter(value, e) {
      let campusName = "";
      e.forEach(element => {
        if (element.campusID == value) {
          campusName = element.campusName;
        }
      });
      return campusName;
    }
  }
};
</script>

<style lang="scss" scoped>
.personal {
  display: flex;
  flex-direction: column;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #f7f7f7;
  font-family: PingFangSC-bold;
}
.bg-green {
  background-color: #99cc33;
  height: 170px;
}
.bg-purple {
  background-color: #6385d7;
  height: 250px;
}
.my-order {
  padding: 11px 11px 0 11px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0);
}
.me-cell-value {
  color: rgba(58, 58, 58, 0.65);
  font-size: 12px;
}
.gird-p {
  margin: 5px;
  color: rgba(58, 58, 58, 1);
  font-size: 12px;
}
.menu {
  background-color: #fff;
  border-radius: 0 0 8px 8px;
  height: 82px;
}
.menu-icon {
  height: 82px;
  width: 82px;
}
.menu-icon:active {
  background-color: rgba(58, 58, 58, 0.05);
}
</style>